<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小红书海报生成器</title>
  <style>
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      background: #f7f7f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }
    h1 {
      color: #d4237a;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .container {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      padding: 32px 24px 24px 24px;
      margin-bottom: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 340px;
    }
    label {
      font-size: 1.1em;
      margin-bottom: 8px;
      color: #333;
    }
    input[type="text"] {
      width: 240px;
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 1em;
      margin-bottom: 16px;
      outline: none;
      transition: border 0.2s;
    }
    input[type="text"]:focus {
      border: 1.5px solid #d4237a;
    }
    button {
      background: #d4237a;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 28px;
      font-size: 1.1em;
      cursor: pointer;
      margin-bottom: 10px;
      transition: background 0.2s;
    }
    button:hover {
      background: #b81c6e;
    }
    #poster-preview {
      margin-top: 24px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .tip {
      color: #888;
      font-size: 0.95em;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <h1>小红书海报生成器</h1>
  <div class="container">
    <label for="theme">请输入海报主题：</label>
    <input type="text" id="theme" placeholder="如：夏日旅行打卡" maxlength="20" value="夏日旅行打卡" />
    <label for="content">请输入内容：</label>
    <input type="text" id="content" placeholder="如：阳光沙滩，快乐出发！" maxlength="40" value="阳光沙滩，快乐出发！" />
    <label for="username">用户名：</label>
    <input type="text" id="username" placeholder="如：小红薯123" maxlength="16" value="小红薯123" />
    <label for="topic">话题：</label>
    <input type="text" id="topic" placeholder="如：#夏日旅行#" maxlength="20" value="#夏日旅行#" />
    <label for="bgcolor">选择背景颜色：</label>
    <select id="bgcolor">
      <option value="pink" selected>小红书粉（默认）</option>
      <option value="orange">活力橙</option>
      <option value="blue">清新蓝</option>
      <option value="green">治愈绿</option>
      <option value="purple">梦幻紫</option>
      <option value="yellow">明亮黄</option>
    </select>
    <button onclick="generatePoster()">生成海报</button>
    <div id="poster-preview"></div>
    <button id="download-btn" style="display:none;" onclick="downloadPoster()">下载海报</button>
    <div class="tip">海报尺寸：900x1200px（3:4）</div>
  </div>
  <script>
    const posterWidth = 900;
    const posterHeight = 1200;
    let posterDataUrl = '';

    function generatePoster() {
      const theme = document.getElementById('theme').value.trim();
      const content = document.getElementById('content').value.trim();
      const username = document.getElementById('username').value.trim();
      const topic = document.getElementById('topic').value.trim();
      const bgcolor = document.getElementById('bgcolor').value;
      if (!theme) {
        alert('请输入海报主题！');
        return;
      }
      // 创建canvas
      const canvas = document.createElement('canvas');
      canvas.width = posterWidth;
      canvas.height = posterHeight;
      const ctx = canvas.getContext('2d');

      // 背景渐变色方案
      const bgGradients = {
        pink: ['#fff0f6', '#ffe4ec'],
        orange: ['#fff7e6', '#ffe0b2'],
        blue: ['#e6f7ff', '#b3e0ff'],
        green: ['#e6fff2', '#b2ffd9'],
        purple: ['#f3e6ff', '#e0b2ff'],
        yellow: ['#fffbe6', '#fff2b2']
      };
      const [bgStart, bgEnd] = bgGradients[bgcolor] || bgGradients.pink;
      const gradient = ctx.createLinearGradient(0, 0, 0, posterHeight);
      gradient.addColorStop(0, bgStart);
      gradient.addColorStop(1, bgEnd);
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, posterWidth, posterHeight);

      // 顶部红色标签
      ctx.save();
      ctx.fillStyle = '#d4237a';
      ctx.beginPath();
      ctx.moveTo(60, 60);
      ctx.lineTo(240, 60);
      ctx.quadraticCurveTo(260, 60, 260, 80);
      ctx.lineTo(260, 120);
      ctx.quadraticCurveTo(260, 140, 240, 140);
      ctx.lineTo(60, 140);
      ctx.quadraticCurveTo(40, 140, 40, 120);
      ctx.lineTo(40, 80);
      ctx.quadraticCurveTo(40, 60, 60, 60);
      ctx.closePath();
      ctx.fill();
      ctx.font = 'bold 38px "PingFang SC", "Microsoft YaHei", Arial';
      ctx.fillStyle = '#fff';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('小红书', 150, 100);
      ctx.restore();

      // 主题文字
      ctx.save();
      ctx.font = 'bold 60px "PingFang SC", "Microsoft YaHei", Arial';
      ctx.fillStyle = '#d4237a';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      wrapText(ctx, theme, posterWidth/2, 420, 760, 80);
      ctx.restore();

      // 内容文字
      if(content) {
        ctx.save();
        ctx.font = '32px "PingFang SC", "Microsoft YaHei", Arial';
        ctx.fillStyle = '#333';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        wrapText(ctx, content, posterWidth/2, 600, 700, 48);
        ctx.restore();
      }

      // 话题
      if(topic) {
        ctx.save();
        ctx.font = 'bold 30px "PingFang SC", "Microsoft YaHei", Arial';
        ctx.fillStyle = '#d4237a';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText(topic, posterWidth/2, 1050);
        ctx.restore();
      }

      // 用户名
      if(username) {
        ctx.save();
        ctx.font = '24px "PingFang SC", "Microsoft YaHei", Arial';
        ctx.fillStyle = '#888';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';
        ctx.fillText('@' + username, posterWidth-60, posterHeight-40);
        ctx.restore();
      }

      // 底部装饰
      ctx.save();
      ctx.globalAlpha = 0.12;
      ctx.beginPath();
      ctx.arc(posterWidth-120, posterHeight-120, 180, 0, 2*Math.PI);
      ctx.fillStyle = '#d4237a';
      ctx.fill();
      ctx.globalAlpha = 1;
      ctx.restore();

      // 生成预览
      posterDataUrl = canvas.toDataURL('image/png');
      const preview = document.getElementById('poster-preview');
      preview.innerHTML = `<img src="${posterDataUrl}" width="225" height="300" style="border-radius:12px;box-shadow:0 2px 12px #e0e0e0;" alt="海报预览" />`;
      document.getElementById('download-btn').style.display = 'block';
    }

    // 自动换行绘制文本
    function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
      const words = text.split('');
      let line = '';
      let lines = [];
      for(let n = 0; n < words.length; n++) {
        const testLine = line + words[n];
        const metrics = ctx.measureText(testLine);
        if (metrics.width > maxWidth && n > 0) {
          lines.push(line);
          line = words[n];
        } else {
          line = testLine;
        }
      }
      lines.push(line);
      const totalHeight = lines.length * lineHeight;
      let startY = y - totalHeight/2 + lineHeight/2;
      for(let i=0; i<lines.length; i++) {
        ctx.fillText(lines[i], x, startY + i*lineHeight);
      }
    }

    function downloadPoster() {
      if (!posterDataUrl) return;
      const a = document.createElement('a');
      a.href = posterDataUrl;
      a.download = 'xhs_poster.png';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  </script>
</body>
</html> 